<template>
  <div class="task-item row-v task-status" :class="'ts' + status ">
    <div class="caption">
      <h5 class="qikux-manage">
        <b class="qikux-lv" :class="'qikux-leave-' + leave">{{ leaveName }}</b>{{ stageName }}
      </h5>
      <h6>{{ moduleName }}</h6>
    </div>
    <p v-html="title"></p>
    <div class="controls">
      <a class="btn" href="javascript:void(0)" @click="previewTask">查看</a>
      <a class="btn" href="javascript:void(0)" v-if="status === 0">开始</a>
      <a class="btn" href="javascript:void(0)" @click="submitCode" v-if="status === 1 || status === 2">提交</a>
      <a class="btn" href="javascript:void(0)" v-if="status === 3 || status === 4 || status === -1">修改</a>
      <a class="btn" href="javascript:void(0)" v-if="status === 4">完成</a>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    leave: {type: Number, required: true},
    id: {type: Number, required: true},
    stage: {type: [Number, String], required: true},
    moduleName: {type: String, required: true},
    title: {type: String, required: true},
    status: {type: Number, required: false},
  },
  computed: {
    leaveName() {
      switch (this.leave) {
        case 1:
          return '简单题';
        case 2:
          return '中等题';
        case 3:
          return '难题';
        case 4:
          return '选做题';
      }
    },
    stageName() {
      if (typeof this.stage === 'string') return this.stage;
      switch (this.stage) {
        case 1:
          return '第一阶段';
        case 2:
          return '第二阶段';
        case 3:
          return '第三阶段';
        case 4:
          return '第四阶段';
        case 5:
          return '第五阶段';
        default:
          '未知数据'
      }
    }
  },
  methods: {
    previewTask() {
      this.$layer.open({
        type: 2,
        title: '查看任务',
        shadeClose: true,
        shade: 0.5,
        area: ['1300px', '780px'],
        btn: ['保存', '关闭'],
        content: '/task/preview',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    },
    submitCode() {
      this.$layer.open({
        type: 2,
        title: '提交任务',
        shadeClose: true,
        shade: 0.5,
        area: ['1300px', '780px'],
        btn: ['保存', '关闭'],
        content: '/task/code',
        yes: (index, layero) => {
          layer.close(index);
        }
      })
    }
  }
}
</script>

<style scoped>
.task-item {
  position: relative;
  width: 25%;
  max-width: 315px;
  height: 300px;
  border: 1px solid #eee;
  text-align: center;
  box-shadow: 2px -2px 10px #ccc;
  box-sizing: border-box;
}

.task-item .caption {
  position: relative;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
  color: #fff;
}

.task-item .caption h5, .task-item .caption h6 {
  width: 50%;
  font-weight: 400;
  float: left;
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.task-item .caption h5 {
  font-size: 20px;
  background-color: #01AAED;
  vertical-align: top;
  height: 40px;
}

.task-item .caption h5::after {
  content: '';
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 0;
  height: 0;
  border-width: 20px; /* 设置边长 */
  border-style: solid;
  border-color: transparent transparent #5FB878 transparent;
}

.task-item .caption h6 {
  font-size: 16px;
  background-color: #5FB878;
}

.task-item .caption h6::after {
  content: '';
  position: absolute;
  left: -20px;
  top: 0;
  width: 0;
  height: 0;
  border-width: 20px; /* 设置边长 */
  border-style: solid;
  border-color: #01AAED transparent transparent transparent;
}

.task-item p {
  padding: 20px;
  box-sizing: border-box;
  text-align: left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  height: 165px;
}

.task-item .controls {
  border-top: 1px solid #eee;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  z-index: 1;
}

.task-item .controls a {
  padding: 0 15px;
  color: #333;
}


.row-v {
  display: flex;
  flex-direction: column;
}

.task-status::after {
  position: absolute;
  width: 80px;
  height: 40px;
  right: 20px;
  bottom: 60px;
  color: #f9f9f9;
  font-size: 14px;
  line-height: 40px;
  border-radius: 8px;
  transform: rotate(-20deg);
  z-index: 9;
  cursor: pointer;
}

.task-status::after:hover {
  transform: translateY(10px) rotate(0deg);
  transition: transform 0.5s ease;
}

.task-status.ts0::after {
  content: '未开始';
  background-color: #393D49;
}

.task-status.ts1::after {
  content: '进行中';
  background-color: #1E9FFF;
}

.task-status.ts2::after {
  content: '需讲解';
  background-color: #FFB800;
}

.task-status.ts3::after {
  content: '已提交';
  background-color: #5FB878;
}

.task-status.ts4::after {
  content: '已检查';
  background-color: #009688;
}

.task-status.ts5::after {
  content: '已完成';
  background-color: #c2c2c2;
}

.task-status.ts-1::after {
  content: '异常题';
  background-color: #FF5722;
}

.qikux-manage {
  text-align: left;
  padding-left: 20px;
  box-sizing: border-box;
}

.qikux-lv {
  display: inline-block;
  width: 40px;
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  letter-spacing: 100px;
  position: relative;
  user-select: none;
  margin-left: -10px;
  margin-right: 5px;
  box-sizing: border-box;
  padding-left: 10px;
}

.qikux-lv::before {
  position: absolute;
  content: '【';
  width: 16px;
  letter-spacing: 2px;
  color: #fff;
  left: -10px;
}

.qikux-lv::after {
  position: absolute;
  content: '】';
  width: 16px;
  left: 30px;
  color: #fff;
  margin-right: 15px;
}

.qikux-leave-1 {
  color: #FFF;
}

.qikux-leave-2 {
  color: #c85ff1;
}

.qikux-leave-3 {
  color: #FFB800
}

.qikux-leave-4 {
  color: #FF5722;
}
</style>